Попередня сторінка: 22. Графічні зображення та гіперпосила...
Наступна сторінка: 24. Сучасні мови програмування. Система...
Інформацію на вебсторінці сайту можна подати у вигляді таблиці.
Теги розмітки таблиці
Ознайомимося з основними тегами розмітки таблиці:
Розглянемо, як розмічати таблицю відповідними тегами (рис. 23.1):
Макет вебсторінки можна утворити за допомогою HTML-таблиці, об’єднуючи певні клітинки і визначаючи розміщення певних об’єктів. Але зараз для вебсторінок застосовують теги структурування документа (див. форзац 2) і CSS (від англ. Cascading Style Sheets) — каскадні таблиці стилів, які розміщують у HTML-файлі або в окремому файлі.
Атрибути тегів розмітки таб/іиці
Теги можуть містити атрибути. Атрибути в тегах розмітки таблиці впливають на вигляд таблиці, клітинок і написів у них:
Атрибут |
Призначення |
align |
Вирівнювання таблиці у вікні браузера |
background |
Фоновий малюнок |
bgcolor |
Колір тла |
border |
Товщина рамки в пікселях |
bordercolor |
Колір рамки |
cellspacing |
Відстань між клітинками таблиці |
cellpadding |
Відстань між текстом клітинки та її межею |
rules |
Відображення рамок таблиці |
title |
Спливна підказка |
width |
Ширина таблиці (клітинки) у відсотках або пікселях |
height |
Висота таблиці (клітинки) у відсотках або пікселях |
Оскільки ширина клітинок одного стовпця не може бути різною в різних рядках, то її достатньо вказати лише для одного рядка.
ширина таблиці дорівнює ширині робочого
поля вікна браузера;
ширина клітинки дорівнює половині ширини
таблиці.
Відступи
Для налаштування відстаней між клітинками, а також між текстом і межами використовують атрибути відступів (рис. 23.2):
Форматування вмісту к/іітинок
Теги рядків (<tr>) і клітинок (<td>) можуть включати атрибути для змінення вирівнювання тексту відносно меж клітинки.
Атрибут align дозволяє задавати горизонтальне вирівнювання:
При розмічанні таблиці виникає потреба об’єднати кілька клітинок. Для цього використовують атрибути colspan (злиття клітинок у рядку) (рис. 23.4, а) і rowspan (злиття клітинок у стовпці) (рис. 23.4, б).
Питання для самоперевірки
1. Як додати таблицю на вебсторінку сайту?
2. Як вирівняти текст у клітинці таблиці по горизонталі?
3. Як вирівняти текст у клітинці таблиці по вертикалі?
4. Як установити товщину меж таблиці?
5. Як установити відступ від тексту в клітинці до її меж?
6. Як об’єднати клітинки одного рядка або стовпця таблиці?
Вправа 23
Створити таблицю за зразком, наведеним на рис. 23.5.
1) Відкрийте текстовий редактор та створіть HTML-документ для відображення таблиці (рис. 23.6). Збережіть документ з іменем Вправа 23.html.
2) Змініть HTML-код, об’єднавши потрібні клітинки за зразком, і заповніть їх, як показано на рис. 23.7.
3) Задайте розміри таблиці в пікселях: ширина — 400, висота — 200.
4) Установіть параметри клітинок у відсотках від розміру таблиці: висота верхнього рядка — 35%, ширина другого і третього стовпців — 60% і 20% відповідно.
5) Вирівняйте по вертикалі і горизонталі написи в клітинках (див. рис. 23.5).
6) Збережіть документ. Перегляньте таблицю в браузері. За необхідності відформатуйте клітинки таблиці і написи в них у відповідності до зразка (рис. 23.5).
Завершіть роботу за комп’ютером.
Комп'ютерне тестування
Виконайте тестове завдання 23 із автоматичною перевіркою результату.
Практична робота \\
Створення головної сторінки сайту засобами HTML
Завдання: створити головну сторінку сайту засобами HTML, дотримуючись правил ергономічного розміщення матеріалів на вебсторінці.
Обладнання: комп’ютер, підключений до інтернету, комп’ютерний або онлайн-редактор сайтів.
Теоретична частина
Більшість шаблонів, які пропонують СКВ, створюються професіоналами; в них уже дотримано основні правила щодо розробки сайтів:
• вміст лаконічний, поданий у зрозумілій формі;
• посилання на вебсторінках помітні та однозначні;
• навігація вебсторінками сайту зручна і проста.
Вебсторінки сайту мають відповідати основним правилам розробки
сайтів та критеріям ергономічного розміщення матеріалів на сторінках сайту.
Критерії ергономічного сайту Оформлення вебсторінок
• Дотримання єдиного стилю оформлення вебсторінок.
• Вибір кольорів тла та тексту згідно з правилами колористики.
• Читабельний шрифт, виділення заголовків кольором і більшим розміром шрифта.
• Вирівнювання тексту за шириною.
• Якісні графічні зображення з можливістю перегляду.
• Уникнення використання подразнюючої анімації.
• Текстові поля і зображення з відступами один від одного та від країв таблиць.
Зміст наповнення
• Зазначення назви сайту на всіх вебсторінках.
• Наявність заголовків на вебсторінках.
• Розміщення найважливіших відомостей на початку вебсторінки.
• Розміщення тексту максимум у три колонки.
• Недопустимість використання горизонтальних смуг прокручування для перегляду сторінок.
• Дублювання в нижньому колонтитулі меню, роміщення контактних даних власника ресурсу, відомостей про авторські права.
Розташування вмісту
• Можливість переходу з усіх вебсторінок на головну сторінку.
• Використання не більш ніж трьох рівнів вкладеності вебсторінок.
• Помітність і наочність меню і кнопок, уникнення їх двозначності.
• Відмінність гіперпосилань від решти тексту.
• Використання в одному блоці не більш ніж 7 гіперпосилань (краще використовувати вкладені меню або блоки).
• Використання засобів навігації всередині тексту (зміст із посиланнями тощо) на вебсторінках із великим обсягом тексту.
Хід роботи
Під час роботи з комп’ютером дотримуйтеся правил безпеки.
1. Придумайте тему нового сайту, продумайте вміст і розташування елементів на головній сторінці сайту.
2. Знайдіть в інтернеті (або створіть самостійно) матеріал, необхідний для головної сторінки (тексти, рисунки, посилання тощо) і збережіть у папці Сайт.
3. Розробіть ескіз головної сторінки свого сайту в зошиті або текстовому чи графічному редакторі та створіть макет.
Накресліть таблицю навколо елементів сторінки (рис. 1).
4. За вказівкою вчителя запустіть встановлений на вашому комп’ютері один із HTML-редакторів, наприклад Microsoft SharePoint Designer, hefs-редактор тощо, або один із онлайн-редакторів: Online
HTML Editor; html-instant; Real-Time HTML Editor; TimsFreeStuff HTML Editor; Online WYSIWYG HTML Editor тощо.
5. Створіть HTML-код вебсторінки із порожньою таблицею і доповніть його кодом таблиці з потрібною кількістю рядків і стовпців відповідно до вашого макета (п. З, рис. 1, б), вказавши відносні розміри таблиці у відсотках. Збережіть HTML-файл з іменем index.html у папці Сайт.
6. Об’єднайте, де це потрібно, рядки і стовпці, щоб загальний вигляд таблиці відповідав запланованому розташуванню елементів на головній сторінці вашого сайту (рис. 2).
7. Установіть потрібні розміри (відносні та/чи абсолютні) для комірок таблиці згідно із зображеним вами макетом (рис. 2).
8. Додайте до таблиці потрібні написи і рисунки, меню, кнопки тощо відповідно до ескізу головної сторінки (рис. 1).
9. Відформатуйте елементи головної сторінки (колір, розмір, вирівнювання тощо) відповідно до критеріїв ергономіки.
10. Додайте до меню (і/або кнопок) необхідні гіперпосилання на інтер-нет-ресурси та перевірте роботу посилань.
11. Вимкніть відображення меж таблиці. Збережіть HTML-файл. Перегляньте сторінку сайту у кількох браузерах, з різним масштабу-ванням. Перевірте роботу меню та/або кнопок.
12. Надішліть HTML-файл вчителеві електронною поштою або збережіть файл на хмарному диску, надавши до нього доступ вчителю. Завершіть роботу за комп’ютером.
Зробіть висновок: як використовувати таблицю для макетування
вебсторінки.
РОЗДІЛ 5
АЛГОРИТМИ ТА ПРОГРАМИ
ПОВТОРЮЄМО
У 5-7 класах ви опанували основи мови програмування Python, знаєте, як реалізувати базові алгоритмічні структури і вмієте створювати програми з використанням розгалужень і повторень.
Ви розширили уявлення про типи величин і алгоритми опрацювання даних різних типів і розробляли програми з графічним інтерфейсом, створюючи об’єкти класів графічних компонентів. Ви також навчилися задавати властивості найуживаніших об’єктів графічного інтерфейсу та програмувати обробку подій для цих об’єктів.
Ви вмієте описувати об’єкти, використовувати екземпляри класів у програмах; оволоділи прийомами роботи в середовищі програмування IDLE, навчилися вести діалог в інтерактивному режимі в оболонці IDLE та ін.
У цьому розділі ви продовжите вивчення основ програмування мовою Python і навчитеся працювати в середовищі FyCharm. Воно включає текстовий редактор для введення програми з можливостями інтелектуального введення та автодоповнення коду, транслятор тощо.
Це матеріал з підручника Інформатика 8 клас Бондаренко (2021)
Наступна сторінка: 24. Сучасні мови програмування. Система...